<template>
  <div class="log">
    <div class="log-topbar">消息记录</div>
    <div class="log-content" @mouseenter="logContentMouseenter" @mouseleave="logContentMouseleave">
      <p v-for="log in logArray" :key="log.id" v-html="log.content"></p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Log',

  data() {
    return {
      temp: 0,
      logArray: [],
      logCount: 0,
      logContentEl: {},
      logContentMouseLock: false
    }
  },

  computed: {
    renderCount() {
      return this.$store.state.renderCount
    },
  },

  watch: {
    renderCount() {
      refreshData(this)
    },
  },

  mounted() {
    this.logContentEl = document.querySelector('.log-content')
    refreshData(this)
  },

  updated() {
    if (!this.logContentMouseLock) {
      this.logContentEl.scrollTop = this.logContentEl.scrollHeight
    }
  },

  methods: {
    logContentMouseenter() {
      this.logContentMouseLock = true
    },
    logContentMouseleave() {
      this.logContentMouseLock = false
    },
  },
}

let refreshData = (that) => {
  that.logArray = that.$game.logData
}
</script>

<style lang="scss">

</style>
